<script setup lang="ts">
import { add, update } from '@/api/portal/subSystem';
import { getSystemTypeList } from "@/api/portal/systemType";
import { watch, ref, computed, onMounted, reactive, toRefs } from 'vue';
import { notify } from '@/utils/element';
import { SubSystemList } from '@/types/portal';

//定义自定义事件
const emit = defineEmits(['refresh']);

const initData = {status: 0};

const state = reactive({
    title: '新增',      //新增 || 编辑
    type: 'add' as FormType,
    visible: false,
    loading: false,
    formData: {
        status: 0,
    } as SubSystemList,
})

const { title, type , visible , loading , formData } = {...toRefs(state)};

defineExpose({
    open,
});


onMounted(() => {
    loadRoleOptions();
});

function open(type: FormType, title: string, data= {} as any) {
    state.type = type;
    state.title = title;
    //合并初始数据，深度拷贝，不然会影响原数据
    state.formData = JSON.parse(JSON.stringify({ ...initData, ...data }));
    state.visible = true;
}

const systemTypeOptions = ref([])
async function loadRoleOptions() {
  try {
    loading.value = true;
    const { data } = await getSystemTypeList();
    if (data && data.length > 0) {
        systemTypeOptions.value = data.map((item: any) => ({
        value: item.id,
        label: item.name,
      }));
    } else {
        systemTypeOptions.value = [];
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

const disabled = computed(() => type.value ==='edit');

const formRef = ref();
function submitForm() {
    formRef.value?.validate((valid: boolean) => {
        if(!valid) return;
        //校验通过
       //调用接口，提交数据
        submitData();
        
    });
}

function close() {
    if(state.loading) return;
    formRef.value?.resetFields();
    state.visible = false;
}

async function submitData() {
    try {
        state.loading = true;
        let res: any = {};
        if(state.type === 'edit') {
            res = await update(state.formData);
        }else {
            res = await add(state.formData);
        }
        state.loading = false;
        if(res.code !== 200) return;
        notify('操作成功！', {type: 'success'});
        //关闭窗口
        close();
        //触发父组件重新加载数据
        emit('refresh');
    } catch (error) {
    } finally {
        state.loading = false;
    }
}
</script>

<template>
  <el-drawer :title="title+'应用'"  v-model="visible" :before-close="close" direction="rtl" size="650px">
        <el-form v-loading="loading" ref="formRef" :model="formData" label-width="85px" label-position="right" status-icon label-suffix=":">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="应用名称" prop="title" :rules="{required: true,message:'请输入应用名称',trigger:'blur'}">
                        <el-input v-model.trim="formData.title" placeholder="请输入应用名称" maxlength="30" show-word-limit clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item
                    :rules="{required: true,message:'请选择应用名称',trigger:'blur'}"
                    label="应用类型"
                    prop="systemType"
                >
                    <el-select-v2
                    v-model="formData.systemType"
                    :options="systemTypeOptions"
                    placeholder="请选择应用类型"
                    style="width: 100%"
                    clearable
                    />
                </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="应用Icon" prop="iconLarge"  :rules="{required: true,message:'请输入应用Icon',trigger:'blur'}">
                        <el-input v-model.trim="formData.iconLarge" placeholder="请输入应用Icon" maxlength="30" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="应用排序" prop="sortNo"  :rules="{required: true,message:'请输入应用排序',trigger:'blur'}">
                        <el-input-number v-model="formData.sortNo" :min="1" :max="9999"  placeholder="请输入应用排序" class="w100" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="岗位状态" prop="status">
                        <el-radio-group v-model="formData.status">
                            <el-radio :value="0" border>正常</el-radio>
                            <el-radio :value="1" border>停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="描述" prop="remark">
                    <el-input
                        v-model="formData.description"
                        type="textarea"
                        placeholder="请输入描述信息"
                        maxlength="100"
                        show-word-limit
                    ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row justify="center" class="mt10">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </el-row>
    </el-drawer>
</template>

<style scoped>

</style>
